<template>
  <view>
    <c-navBar
      class="nav_bar"
      title="我的收藏"
      :isTran="TRUE"
      isPerch
    ></c-navBar>
    <!-- <view class="pr" style="height: 400rpx; overflow: hidden; width: 750rpx">
      <image style="width: 100%" :src="urljj" mode="widthFix" />
      <view style="bottom: 20rpx; left: 30rpx" class="pa">
        <view class="df aic">
          <image
            style="
              border: #fff 1rpx solid;
              width: 160rpx;
              height: 160rpx;
              border-radius: 50%;
              margin-right: 32rpx;
            "
            :src="urljj"
          />
          <view class="clo-fff">
            <view class="f34">{{ navData.title }}</view>
            <view style="max-width: 280rpx" class="f34 cont2">{{
              navData.title
            }}</view>
          </view>
        </view>
      </view>
    </view> -->

    <view class="mt10 p30">
      <u-search
        placeholder="搜索商品"
        :showAction="true"
        @custom="custom"
        :animation="false"
        v-model="search"
      ></u-search>
    </view>
    <view>
      <!-- <u-tabs
        :activeStyle="{
          color: '#1A1A1A',
          fontSize: '32rpx',
          fontWeight: 'bold',
        }"
        lineColor="#2AD03D"
        :list="tabList"
        @click="toTab"
      ></u-tabs> -->
      <u-empty
        marginTop="100"
        text="暂无列表"
        :show="isEmpty"
        mode="message"
        :icon="images.empty"
      >
      </u-empty>

      <view class="p30 dis_sb fww">
        <view
          class="bs"
          v-for="v in list"
          :key="v.id"
          style="width: 49%; height: 500rpx"
        >
          <view
            style="
              width: 100%;
              height: 350rpx;
              overflow: hidden;
              border-radius: 15rpx 15rpx 0 0;
			  margin: 0;
            "
            class="bs mb20"
          >
            <image
              style="width: 100%"
              :src="v.cover"
              mode="widthFix"
              @click="toDetails(v)"
            />
          </view>
          <view style="max-width: 367rpx; height: 36rpx; -webkit-line-clamp:1; " class="cont2 p10">{{
            v.title
          }}</view>

          <view class="dis_sb mt20 p10" style="margin:0">
            <view class="df aic">
              <view>
                <image
                  style="width: 50rpx; height: 50rpx; border-radius: 50%;"
                  :src="v.avatar"
                />
              </view>
              <view class="ml10">
                <view style="max-width: 200rpx; font-size: 24rpx;" class="clo-333 cont1">{{
                  v.userName
                }}</view>
                <view style="font-size: 18rpx" class="clo-666">{{
                  v.createTime
                }}</view>
              </view>
            </view>
            <view class="df aic" @click="toCollect(v)">
              <image
                style="width: 32rpx; height: 32rpx;margin-right: 8rpx;"
                :src="
                  v.myLike == 0
                    ? `/static/tabbar/collect.png`
                    : `/static/tabbar/collect-active.png`
                "
                mode="widthFix"
              />
              <view style="font-size:14px;">{{ v.totalLikeNum }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import images from "@/components/c-scroll-list/images.js";
import { init_backgroundList, init_noteCollec } from "@/api/node.js";

export default {
  data() {
    return {
      backgroundUrl: null,
      search: null,
      noteType: null,
      navData: {},
      isEmpty: false,
      urljj:
        "https://inews.gtimg.com/om_bt/OjPq2cnMN_-ivDKjxpCZ2kk_ab8YC5VMnL-0pQ21fUvd4AA/1000",
      images,
      tabList: [
        {
          id: "1",
          name: "推荐",
        },
        {
          id: "2",
          name: "牛排小知识",
        },
        {
          id: "3",
          name: "减脂菜谱",
        },
        {
          id: "4",
          name: "其他",
        },
      ],
      list: [],
      isRoll: null,
      pageNum: 1,
      pageSize: 10,
    };
  },
  onShow() {
    this.getImg();
    this.getList();
  },
  onReachBottom() {
    this.scrolltolower();
  },
  methods: {
    toTab(v) {
      this.noteType = v?.name;
      this.getList();
      console.log("v", v);
    },
    scrolltolower() {
      if (this.isRoll) return;
      this.pageSize = this.pageSize + 10;
      this.getList();
    },
    async toCollect(v) {
      
      console.log("v :>> ", v);
      this.getList();
    },
    async getImg() {
      const res = await init_backgroundList(3);
      this.navData = res;
      console.log("res :>> ", res);
    },
    async getList() {
      const params = {
        search: this.search,
        noteType: this.noteType,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      console.log("params :>> ", params);
      const res = await init_noteCollec(params);
      this.isEmpty = res?.list.length == 0;
      this.isRoll = res?.list.length == res?.total;
      this.list = res?.list;
      console.log("resrw :>> ", res);
    },
    custom(v) {
      console.log("v :>> ", v);
      this.search = v;
      this.getList();
    },
    toDetails(v) {
      uni.navigateTo({
        url: `/pages/note/noteDetails?noteId=${v?.id}`,
      });
      console.log("v :>> ", v);
    },
  },
};
</script>

<style lang="less" scoped></style>
